<template>
    <a-modal v-model:open="showModal" :width="400" :title="formTitle" @ok="confirm">
        <div class="pt-[20px]" aria-hidden="true">
            <a-form :model="formData" ref="formRef" :label-col="{ style: { width: '80px' } }">
                <a-form-item label="名称" name="name" :rules="[{ required: true, message: '请输入名称' },{min:2,message:'至少2个字符'},{ max: 50, message: '长度不能超过50个字符' }]">
                    <a-input v-model:value="formData.name" />
                </a-form-item>
                <a-form-item label="图片" name="img_url">
                    <upload-image v-model="formData.img_url" />
                </a-form-item>
                <a-form-item label="链接" name="link_url">
                    <a-input v-model:value="formData.link_url" />
                </a-form-item>
                <a-form-item label="状态" name="status">
                    <a-radio-group v-model:value="formData.status" name="status">
                        <a-radio :value="1">显示</a-radio>
                        <a-radio :value="0">隐藏</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="排序" name="sort" :rules="[{ required: true, message: '排序' }]">
                    <a-input-number class="w-full" v-model:value="formData.sort" />
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import { addFriendLink, editFriendLink } from '@/utils/api/friend_link';
import UploadImage from '@/components/upload-image/index.vue';

const showModal = ref<boolean>(false);

/**
 * 表单数据
 */
const initialFormData = {
    id: 0,
    name: '',
    img_url: '',
    link_url: '',
    status: 1,
    sort: 100
}

const setFileType = (type: string) => {
    formData.type = type;
}

const formData: Record<string, any> = reactive({ ...initialFormData })

const formRef = ref();

const formTitle = ref('添加友情链接');

const setFormData = async (row: any = null) => {
    if (row == null) {
        formTitle.value = '添加友情链接';
        Object.assign(formData, initialFormData);
    } else {
        formTitle.value = '编辑友情链接';
        Object.assign(formData, row);
    }
}

const emit = defineEmits(['complete']);

const confirm = (e: MouseEvent) => {
    formRef.value
        .validate()
        .then(() => {
            if (formData.id > 0) {
                editFriendLink(formData).then((res: any) => {
                    if (res.code == 200) {
                        message.success(res.message)
                        showModal.value = false;
                        setTimeout(function () {
                            emit('complete');
                        }, 1000);
                    } else {
                        message.error(res.message)
                    }
                })
            } else {
                addFriendLink(formData).then((res: any) => {
                    if (res.code == 200) {
                        message.success(res.message)
                        showModal.value = false;
                        setTimeout(function () {
                            emit('complete');
                        }, 1000);
                    } else {
                        message.error(res.message)
                    }
                })
            }
        });
};



defineExpose({
    showModal,
    setFormData,
    setFileType
})
</script>